<template>
	<div id="">
		<div id="login-top">
			<van-row style="padding-top: 2vh;">
				<van-col span="2" style='margin-left: 80vw;'>
					<van-icon name="service-o" size="20" />
				</van-col>
				<van-col span="2" @click="$router.push('/SetUp')">
					<van-icon name="setting-o" size="20" />
				</van-col>
			</van-row>
			<van-row id="cont" v-if="userInfo">
				<van-col span="8">
					<img :src="userInfo.headerImg">
				</van-col>
				<van-col span="12" id="con">
					<div>
						{{userInfo.nickName}}
					</div>
					<div id="" style="font-size: 0.3rem;margin-top: 2vh;">
						云鹤九霄 龙腾四海
					</div>
				</van-col>
				<van-col span="2" style="margin-top: 3vh;">
					<van-icon name="arrow" />
				</van-col>
			</van-row>
			<van-row id="cont" v-else>
				<van-col span="24">
					<div class="login" @click="login">
						登录
					</div>
				</van-col>
			</van-row>
			<van-row style="margin-top: 2vh;" @click="$router.push('/main-GuanZhu')">
				<van-col span="8">
					<div>68</div>
					<div>关注</div>
				</van-col>
				<van-col span="8">
					<div>0</div>
					<div>粉丝</div>
				</van-col>
				<van-col span="8">
					<div>1</div>
					<div>收藏</div>
				</van-col>
			</van-row>
		</div>
		<!-- 下 -->
		<div id="ding-bottom">
			<van-row id="ding-bottom-one">
				<van-col span="6" style="font-size: 0.4rem;font-weight: bold;margin-right: 40vw;">我的订单</van-col>
				<van-col span="6" style="margin-top: 0.5vh;">查看全部
					<van-icon name="arrow" />
				</van-col>
			</van-row>
			<van-row id="ding-bottom-two">
				<van-col span="4">
					<div><img src="../../../public/my_ico_13.png"></div>
					<div>待付款</div>
				</van-col>
				<van-col span="4">
					<div><img src="../../../public/my_ico_15.png"></div>
					<div>待发货</div>
				</van-col>
				<van-col span="4">
					<div><img src="../../../public/my_ico_17.png"></div>
					<div>待收货</div>
				</van-col>
				<van-col span="4">
					<div><img src="../../../public/my_ico_19.png"></div>
					<div>待评价</div>
				</van-col>
				<van-col span="4">
					<div><img src="../../../public/my_ico_21.png"></div>
					<div>退款/售后</div>
				</van-col>
			</van-row>
		</div>
		<!-- 推荐 -->
		<div id="" style="width: 100vw;text-align: left;margin-top: 4vh;">
			<h3 style="margin-left: 3vw;font-size: 0.4rem;">为您推荐</h3>
		</div>
		<div id=""
			style="width: 100vw;display: flex;flex-direction: row;flex-wrap: wrap;text-align: left;margin-top: 2vh;">
			<div id="" style="width: 45vw;margin-left: 3vw;box-shadow: 2px 2px 2px 2px #f1f1f1;
		border-radius: 10px;margin-top: 1vh;" v-for="item in tui"
				@click="$router.push({path:'/details',query:{goods_id:item.goods_id}})">
				<div id="">
					<img v-lazy="url+item.original_img" style="width: 100%;height: 20vh;">
				</div>
				<div id="wen">
					{{item.goods_name}}
				</div>
				<div id="" style="color: red;font-size: 0.4rem;"><span
						style="font-size: 0.1rem;">￥</span>{{item.market_price}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			tui: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				userInfo: {},
				url: ''
			}
		},
		created() {
			const userInfo = JSON.parse(localStorage.getItem('login'))
			this.userInfo = userInfo
			this.$store.dispatch('user/vuexUrl', '地址')
				.then(e => {
					this.url = e
					console.log(e)
				})
		},
		methods: {
			login() {
				this.$router.push('/Login')
			}
		}
	}
</script>

<style scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}

	.login {
		margin-top: 1vh;
	}

	#login-top {
		width: 100vw;
		height: 30vh;
		background: #000000;
	}

	#login-top {
		color: #FFFFFF;
		font-size: 0.4rem;
	}

	#login-top img {
		width: 80%;
		height: 11vh;
		border-radius: 100%;
	}

	#login-top #con {
		text-align: left;
		margin-top: 2vh;
	}

	#login-top #cont {
		margin-top: 4vh;
	}

	#ding-bottom {
		width: 90vw;
		height: 17vh;
		margin-top: 3vh;
		box-shadow: 2px 2px 2px 2px #f1f1f1;
		border-radius: 10px;
		font-size: 0.25rem;
		margin-left: 5vw;
	}

	#ding-bottom #ding-bottom-one {
		width: 90vw;
		padding-top: 2vh;
	}

	#ding-bottom #ding-bottom-two {
		width: 90vw;
		padding-top: 2.5vh;
		margin-left: 5vw;
	}

	#ding-bottom #ding-bottom-two img {
		width: 55%;
		height: 4vh;
	}

	#wen {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 1vh;
		/* margin-left: 4vw; */
		width: 45vw;
		font-size: 0.3rem;
		text-align: left;
	}
</style>
